import {messages} from "share/common";
import React from "react";
import { connect } from 'react-redux'
import { Menu, Button, Icon, Dropdown, Badge} from 'antd'
import moment from 'moment';
import 'styles/help-center-admin/question-maintenance-detail.scss'
import QuestionMaintenanceService from 'containers/help-center-admin/question-maintenance/question-maintenance-service'
import menuRoute from "routes/menuRoute";

class QuestionMaintenanceDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      question: null,//当前问题
      questionList: [],//当前问题所属的列表
      index: 0, //当前问题在问题列表中的index
      historyList: [],
      languageTab: {key: "", value: ""},
      categoryId: this.props.location.state.categoryId,
      questionId: this.props.location.state.questionId,
      searchValue: this.props.location.state.searchValue,
      editQues: menuRoute.getRouteItem('question-maintenance-edit', 'key').url,
      quesMain: menuRoute.getRouteItem('question-maintenance', 'key').url,
    }
  }

  componentWillMount (){
    this.getQuesDetail();
    this.getAllQuesList();
    this.props.languageList.map(item => {
      if(item.code.toLowerCase() === this.props.language.code.toLowerCase()){
        this.setState({
          languageTab: {key: item.code.toLowerCase(), value: item.value},
        });
      }
    })
  }

  getQuesDetail = () => {
    this.setState({
      loading: true,
    });
    QuestionMaintenanceService.getQuesDetail(this.state.questionId, this.props.language.code).then(res => {
      this.setState({
        question: res.data,
        loading: false,
      });
    }).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  //获取历史版本列表
  getHistoryLists = () => {
    this.setState({
      loading: true,
    });
    QuestionMaintenanceService.getHistoryLists(this.state.questionId, this.props.language.code).then(res => {
      this.setState({
        historyList: res.data,
        loading: false,
      });
    }).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  //根据问题分类类型获取问题列表
  getAllQuesList = () => {
    this.setState({
      loading: true,
    });
    QuestionMaintenanceService.getAllQuesList('COMMONPROBLEM', this.props.language.code).then(res => {
      res.data.map(item => {
        if(item.id === this.state.categoryId){
          this.setState({
            questionList: item.commonProblems,
          }, () => {
            this.state.questionList.map((ques, index) => {
              if(ques.id === this.state.questionId){
                this.setState({
                  index,
                  loading: false,
                });
              }
            })
          });
        }
      });
    }).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  goToEdit = () => {
    const {editQues, questionId} = this.state;
    this.context.router.push({
      pathname: editQues,
      state: {
        id: questionId,
      }
    })
  };

  clickNextQues = (e, id) => {
    this.setState({
      questionId: id,
    }, () => {
      this.getQuesDetail();
      this.getAllQuesList();
    });
  };

  onClickLanguage = (language) => {
    this.props.languageList.map(item => {
      if(item.code.toLowerCase() === language.key.toLowerCase()){
        this.setState({
          languageTab: {key: item.code.toLowerCase(), value: item.value}
        });
      }
    });
  };

  goBack = () => {
    const {quesMain, searchValue} = this.state;
    this.context.router.push({
      pathname: quesMain,
      state: {
        searchValue
      }
    });
  };

  render() {
    const {question, questionList, index, languageTab} = this.state;
    const menu = (
      <Menu onClick={this.onClickLanguage}>
        {
          this.props.languageList.map(item => {
            return(
              <Menu.Item key={item.code.toLowerCase()}>{item.value}</Menu.Item>
            )
          })
        }
      </Menu>
    );
    return (
      <div className={'question-detail-wrap'}>
        <div className={'question-detail-left'}
             style={{width: '100%'}}>
          <div className={'question-detail-left-head'}>
            <div className={'question-detail-head-title'}>
              {
                question &&
                <span>
                  {question.i18n && question.i18n.question && question.i18n.question.length &&
                    (question.i18n.question.filter(item => item.language === languageTab.key).length) ?
                    question.i18n.question.filter(item => item.language === languageTab.key)[0].value
                    : question.question}
                </span>
              }
            </div>
            <div className={'question-detail-head-btns'}>
              <Button type={'primary'} style={{marginRight: 10}} onClick={this.goToEdit}>{messages('common.edit')/*编辑*/}</Button>
              <Button onClick={this.goBack}> {messages('common.back')/*返回*/}
              </Button>
            </div>
            <div style={{clear: "both"}}></div>
          </div>
          <div className={'question-detail-left-content'}>
            <div className={'question-detail-left-content-left'}>
              {
                question &&
                <div>
                  <div className={"text-style-color"}>
                    <div>
                  <span style={{marginRight: 20}}> {messages('common.column.status')/*状态*/}：<Badge status={question.enabled  ? 'success' : 'error'}/>{question.enabled ? messages('common.enabled')/* 启用*/ : messages('common.disabled')/*禁用*/}
                    </span>
                    <span style={{marginRight: 20}}> {messages('help-center-admin.key4')/*分类*/}：
                      {question.categoryName ? question.categoryName : "-"}
                  </span>
                    <span style={{marginRight: 20}}> {messages('help-center-admin.key5')/*角色*/}：
                      {
                        question.authorities && question.authorities.length ?
                          (
                            question.authorities.filter(item => item.code === "ROLE_USER").length ? messages('help-center-admin.key6')/*全员*/
                              :
                              question.authorities.map(auth => {
                                return (
                                  <span key={auth.id}>{auth.name}&nbsp;&nbsp;</span>
                                )
                              })
                          )
                          : "-"
                      }
                  </span>
                    <span style={{marginRight: 20}}> {messages('common.from')/*来源*/}：
                      {question.tenantId === 0 || question.tenantId === "0" ? messages('help-center-admin.key7')/*系统*/ : messages('help-center-admin.key8')/*自定义*/}
                  </span>
                    {!question.tenantId === 0 || question.tenantId === "0" &&
                    <span style={{marginRight: 20}}> {messages('help-center-admin.key9')/*更新时间*/}：{question.lastUpdatedDate ? moment(question.lastUpdatedDate).format("YYYY-MM-DD HH:mm:ss") : "-"}
                  </span>
                    }
                  </div>
                  {!question.tenantId === 0 || question.tenantId === "0" &&
                  <div style={{marginTop: 10}}> {messages('common.remark')/*备注*/}：{question.remark ? question.remark : '-'}
                  </div>
                  }
                  </div>
                  {
                    question &&
                    <div>
                      {
                        question.i18n && question.i18n.answer && question.i18n.answer.length &&
                        (question.i18n.answer.filter(item => item.language === languageTab.key).length) ?
                          <div dangerouslySetInnerHTML={{__html: question.i18n.answer.filter(item => item.language === languageTab.key)[0].value}}
                               style={{marginTop: 15}}/>
                          :
                          <div dangerouslySetInnerHTML={{__html: question.answer}}
                               style={{marginTop: 15}}/>
                      }
                    </div>
                  }
                </div>
              }
            </div>
            <div className={'question-detail-left-content-right'}>
              <Dropdown overlay={menu}>
                <a>{languageTab.value} &nbsp;<Icon type="down" /></a>
              </Dropdown>
            </div>
          </div>
        </div>
        {(questionList && (questionList.length > 1)) ?
          <div className={'question-detail-bottom'}>
            <div className={'question-detail-bottom-left'}>
              {index > 0 &&
              <a onClick={(e) => {this.clickNextQues(e, questionList[index - 1].id)}} className={'question-detail-bottom-left-a'}>
                <Icon type="left" style={{marginRight: 10}}/>&nbsp;
                {questionList[index - 1].question}
              </a>
              }
            </div>
            <div className={'question-detail-bottom-right'}>
              {index < questionList.length - 1 &&
              <a onClick={(e) => {this.clickNextQues(e, questionList[index + 1].id)}} className={'question-detail-bottom-right-a'}>
                {questionList[index + 1].question}
                &nbsp;<Icon type="right" style={{marginRight: 10}}/>
              </a>
              }
            </div>
          </div>
          : null
        }

      </div>
    )
  }
}

QuestionMaintenanceDetail.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    language: state.main.language,
    languageList: state.login.languageList,
  }
}

export default connect(mapStateToProps)(QuestionMaintenanceDetail)
